<template>
  <el-dialog v-model="dialogVisible" title="班级明细" width="80%" :before-close="handleClose">
    <div class="class-detail-container">
    <!-- 班级基本信息 -->
    <el-card class="class-info-card">
      <template #header>
        <div class="card-header">
          <span>{{ classInfo.name }}</span>
        </div>
      </template>
      <div class="class-meta">
        <div>班主任：{{ classInfo.headTeacher }}</div>
        <div>学生人数：{{ classInfo.studentCount }}人</div>
        <div>创建时间：{{ classInfo.createTime }}</div>
      </div>
    </el-card>

    <!-- 学生列表 -->
    <StudentList :students="students" />

    <!-- 教师列表 -->
    <TeacherList :teachers="teachers" />

    <!-- 作业监控统计 -->
    <HomeworkStats :stats="homeworkStats" />
  </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
       
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox } from 'element-plus';
import { ref, onMounted } from 'vue'
import StudentList from './components/StudentList.vue'
import TeacherList from './components/TeacherList.vue'
import HomeworkStats from './components/HomeworkStats.vue'


const props = defineProps({
  visiable: Boolean,
  action: String,
});
const emit1 = defineEmits(['updateDetailVisiable']);
const dialogVisible = ref(props.visiable);
const loading = ref(false)

// 班级基本信息
const classInfo = ref({
  name: '高三(1)班',
  headTeacher: '张老师',
  studentCount: 45,
  createTime: '2023-09-01'
})

// 学生列表数据
const students = ref([])

// 教师列表数据
const teachers = ref([])

// 作业统计
const homeworkStats = ref({
  total: 0,
  submitted: 0,
  passed: 0,
  averageScore: 0,
  subjectStats: []
})

onMounted(async () => {
  // 模拟API调用获取数据
  await fetchStudents()
  await fetchTeachers()
  await fetchHomeworkStats()
})

async function fetchStudents() {
  // 模拟API响应
  students.value = [
    { id: 1, name: '张三', studentNumber: '2023001', gender: '男', phone: '13800138001' },
    { id: 2, name: '李四', studentNumber: '2023002', gender: '女', phone: '13800138002' },
    // 更多学生数据...
  ]
}

async function fetchTeachers() {
  // 模拟API响应
  teachers.value = [
    { id: 1, name: '王老师', subject: '语文', phone: '13900139001', email: 'wang@school.com' },
    { id: 2, name: '李老师', subject: '数学', phone: '13900139002', email: 'li@school.com' },
    // 更多教师数据...
  ]
}

async function fetchHomeworkStats() {
  // 模拟API响应
  homeworkStats.value = {
    total: 30,
    submitted: 28,
    passed: 25,
    averageScore: 82.5,
    subjectStats: [
      { subject: '语文', submittedRate: '93%', averageScore: 85 },
      { subject: '数学', submittedRate: '90%', averageScore: 80 },
      { subject: '英语', submittedRate: '96%', averageScore: 88 }
    ]
  }
}

const handleClose = (done: () => void) => {
  emit1('updateDetailVisiable', false);
};

</script>
<style scoped>
.class-detail-container {
  padding: 20px;
}

.class-info-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.class-meta {
  display: flex;
  gap: 20px;
  color: #666;
}
</style>